// 导入图标样式
@import './icons.less';
// 导入naive样式
@import './naive.less';

:root {
  --primary-color: #01fcff;
  --text-color-primary: #ffffff;
  --text-color-secondary: #c9cdd4;
  --text-color-tertiary: #868f9c;
  --text-color-quaternary: #f5f9ff;
}

html,
body,
#app {
  height: 100%;
  padding: 0;
  margin: 0;
  background: url('@/assets/images/bg.png') no-repeat center center;
  background-size: 100% 100%;
}

.pingfang {
  font-family: 'PingFang SC';
}

.text-primary {
  color: var(--primary-color);
}

.text-secondary {
  color: var(--text-color-secondary);
}

.text-tertiary {
  color: var(--text-color-tertiary);
}

.text-quaternary {
  color: var(--text-color-quaternary);
}

.markdown-body.markdown-body-generate > p:last-child:after {
  color: var(--primary-color) !important;
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #d4d6d9;
  border-radius: 3px;

  &:hover {
    background: #d4d6d9;
  }
}

.hide-scrollbar {
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

/* 旋转动画定义 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* 旋转图标样式 */
.icon-spin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  animation: spin 1s linear infinite;
}
